<!--
 * @author luguoxiang
 * @date 2022/9/17
 * 开源项目：https://gitee.com/lgx1992/lg-soar 求star！请给我star！请帮我点个star！
-->
<template>
  <edit-container ref="containerRef" v-model:visible="visible" header="asda" width="1100px" :on-confirm="ok">
    <t-form ref="formRef" :data="data" :label-width="80">
      <t-form-item label="接口" name="code">
        <t-input
          v-model="data.code"
          placeholder="Mapper接口方法，例：cn.lg.soar.system.auth.mapper.UserMapper.selectPage"
        />
      </t-form-item>
      <t-form-item label="描述" name="remark">
        <t-input v-model="data.remark" placeholder="描述" />
      </t-form-item>
      <t-table class="table-form" :columns="columns" :data="data.items" row-key="key">
        <template #tableName="{ row }">
          <t-form-item>
            <t-input v-model="row.tableName" @change="onchange" />
          </t-form-item>
        </template>
        <template #columnName="{ row, rowIndex }">
          <t-form-item
            :name="['items', rowIndex, 'columnName']"
            :rules="rowIndex !== data.items.length - 1 ? [{ required: true }] : []"
          >
            <t-input v-model="row.columnName" @change="onchange" />
          </t-form-item>
        </template>
        <template #expression="{ row, rowIndex }">
          <t-form-item>
            <lg-dict v-model="row.expression" code="ExpressionEnum" placeholder="请选择" />
          </t-form-item>
        </template>
        <template #provideType="{ row, rowIndex }">
          <t-form-item>
            <lg-dict v-model="row.provideType" code="ProvideTypeEnum" placeholder="请选择" />
          </t-form-item>
        </template>
        <template #columnValue="{ row, rowIndex }">
          <t-form-item
            :name="['items', rowIndex, 'columnValue']"
            :rules="rowIndex !== data.items.length - 1 ? [{ required: true }] : []"
          >
            <t-input-adornment>
              <template #prepend>
                <lg-dict v-model="row.provideType" code="ProvideTypeEnum" placeholder="请选择" style="width: 100px" />
              </template>
              <template v-if="row.provideType === 2">
                <t-select
                  v-model="row.columnValue"
                  :options="provides"
                  clearable
                  placeholder="请选择"
                  style="width: 200px"
                  @change="onchange"
                />
              </template>
              <template v-else-if="row.provideType === 1">
                <t-select
                  v-model="row.columnValue"
                  :options="SystemValueEnum"
                  clearable
                  placeholder="请选择"
                  style="width: 200px"
                  @change="onchange"
                />
              </template>
              <template v-else>
                <t-input v-model="row.columnValue" style="width: 200px" @change="onchange" />
              </template>
            </t-input-adornment>
          </t-form-item>
        </template>
        <template #spliceType="{ row, rowIndex }">
          <t-form-item>
            <lg-dict v-model="row.spliceType" code="SpliceTypeEnum" />
          </t-form-item>
        </template>
        <template #ops="{ rowIndex }">
          <t-link v-if="rowIndex !== data.items.length - 1" theme="danger" hover="color" @click="delItem(rowIndex)">
            删除
          </t-link>
        </template>
      </t-table>
    </t-form>
  </edit-container>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { EditContainer } from '@/components';
import { LgDict, nextId, notEmpty, toOptions } from '@/soar';
import ruleProvideApi from './ruleProvideApi.ts';
import api from './api.ts';
import { enums } from '@/api/common';

const emits = defineEmits(['ok']);

const visible = ref(false);
const loading = ref(false);
const containerRef = ref();
const formRef = ref();
const data = ref({
  code: '',
  remark: '',
  items: [],
});

function addItem() {
  data.value.items.push({
    key: nextId(),
    tableName: '',
    columnName: '',
    expression: 0,
    provideType: 0,
    columnValue: '',
    spliceType: 0,
  });
}
addItem();

function delItem(index) {
  data.value.items.splice(index, 1);
}

function valueable(row) {
  return row.tableName || row.columnName || row.columnValue;
}

function onchange() {
  const { items } = data.value;
  const row = items[items.length - 1];
  if (valueable(row)) {
    addItem();
  }
}

function ok() {
  formRef.value?.validate().then((values: any) => {
    if (values) {
      const params = {
        ...data.value,
        items: data.value.items.filter(valueable),
      };
      notEmpty(params.items, '请填写规则');
      console.log(params);
      api
        .update(params)
        .then(() => {
          emits('ok');
        })
        .finally(() => {
          loading.value = false;
        });
      loading.value = false;
    }
  });
}

const columns = [
  {
    title: '表名',
    colKey: 'tableName',
    width: 180,
  },
  {
    title: '列名',
    colKey: 'columnName',
  },
  {
    title: '表达式',
    colKey: 'expression',
    width: 135,
  },
  /*  {
    title: '值供应方式',
    colKey: 'provideType',
    width: 120
  }, */
  {
    title: '列值',
    colKey: 'columnValue',
    width: 320,
  },
  {
    title: '拼接方式',
    colKey: 'spliceType',
    width: 90,
  },
  {
    title: '操作',
    colKey: 'ops',
    width: 60,
  },
];

const SystemValueEnum = ref([]);
enums('SystemValueEnum').then((res) => {
  SystemValueEnum.value = toOptions(res.SystemValueEnum);
});

const provides = ref([]);
ruleProvideApi.query({ queryType: 'list', pageSize: 9999 }).then((res) => {
  provides.value = res.list.map((x: { id: any; name: any }) => ({ value: x.id, label: x.name }));
});
defineExpose({
  open() {
    visible.value = true;
  },
});
</script>
<style lang="less" scoped>
:deep(.table-form) {
  .t-form__item {
    margin-bottom: 0 !important;
    .t-form__label {
      display: none;
    }
    .t-form__controls {
      margin-left: 0 !important;
    }
    .t-input__extra {
      position: unset;
    }
  }
}
</style>
